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INTRODUCÄO 


O Fireworks simplifica o processo de criagäo e otimizagäo de imagens para a Web. 


Tradicionalmente, projetistas da Web utilizavam uma ferramenta de bitmap como o Photoshop para criar 
imagens, um programa de desenho baseado em vetores para criar texto e uma combinagäo de filtros, 
utilitários e shareware para aplicar efeitos e criar mapas de imagem e animações, DeBabelizer para 
otimizar imagens JPEG e GIF, e um navegador para visualizar. Revisar uma imagem frequentemente 


forgava os desenvolvedores a apagar tudo e iniciar novamente. 


O Fireworks possibilita a combinação de vetores e bitmaps, a aplicação de efeitos Live Effects, a otimização 
de paletas e a visualização da qualidade da imagem. Não há necessidade de alternar para outros aplicativos 
e utilitários com o Fireworks. Ele é a solução para a criação e otimização de imagens da Web. 


Utilizando o Fireworks, você pode dividir imagens da Web para mesclar tipos de compactação e 
formatos de arquivos para transferências muito rápidas. Também é possível incorporar efeitos de 
rollover em imagens divididas, definir blocos de texto como GIFs, colocar fotos como JPEGs totalmente 
coloridos e gerar automaticamente uma tabela HTML para reorganizar suas imagens divididas. 


Ele também gera o JavaScript para efeitos de rollover, incluindo pré-carregamentos de imagens para 
ação rápida quando o mouse se move sobre o botão. 


Neste curso prático, você irá aprender como utilizar os recursos do Fireworks para criar imagens incor- 
porando elementos de bitmap e vetoriais, utilizando uma caixa de ferramentas interessante cheia de 
efeitos especiais. Você criará botões, adicionará efeitos de rollover e criará uma animação GIF. Também 
irá aprender a otimizar imagens e utilizar Export Preview para comparar formatos e opções de paletas 
antes de tomar uma decisão final e a utilizar o Fireworks para criar mapas de imagem e imagens divididas. 


O Fireworks vem com um sistema extensivo de Ajuda on-line que pode ser consultado em casos de 
dúvida. A maioria das paletas de ferramentas também tem Screen Tips que descrevem funções de 
ícones quando o cursor fica sobre elas. Além disso, um manual do Fireworks no formato PDF está 
localizado em “Arquivos de programas/macromedia/fireworks/using fireworks” para a plataforma 
Windows e na pasta de aplicativos Fireworks, usando a pasta do Fireworks para o Macintosh. 


Você também pode visitar o site da Macromedia na Web no endereço www.macromedia.com para 
atualizações de software, novidades e dicas para tornar o seu trabalho mais produtivo. 


Você descobrirá que o Fireworks é uma ferramenta versátil e útil para facilitar seus esforços para design 
da Web e torná-los mais agradáveis. Esperamos que você goste dele. 
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LICÁO 1: O AMBIENTE FIREWORKS 


OBJETIVOS 


Nesta ligáo vocé irá aprender: 


e as diferengas entre imagens vetoriais e de bitmap 


e como configurar um documento do Fireworks 


e como utilizar as ferramentas e paletas do Fireworks 


e como trabalhar com camadas 


CONTEXTO: IMAGENS BASEADAS EM VETORES E PIXELS EM UM AMBIENTE 


O Fireworks é um aplicativo de imagens vetoriais e de bitmap. Normalmente, há dois tipos de imagens 


de computador: objetos vetoriais criados em um aplicativo como o Macromedia FreeHand e imagens de 


bitmap criadas em um aplicativo como o Adobe Photoshop. 


Objetos vetoriais sáo compostos de caminhos e objetos de bitmap sáo compostos de pixels individuais. 


O Fireworks combina a aparéncia maleável de objetos de bitmap com a flexibilidade, controle e 


capacidade de edigáo de caminhos Bezier em um único ambiente. Nesta ligáo, vocé conhecerá a 


interface, ferramentas e ambiente de trabalho do Fireworks e aprenderá a trabalhar com imagens 


vetoriais e bitmaps ao mesmo tempo. 


EXERCÍCIOS 


Uma Imagem com Componentes Vetoriais e de Bitmap 


1. Ative o aplicativo Fireworks. 


2. Escolha File > Open na barra de menus e selecione 2type.png, encontrado na pasta “Lesson 1,” 


dentro da pasta “Fireworks” transferida a partir do CD-ROM. 


3. Clique em Open. A imagem que vocé verá na janela de documento tem uma imagem de bitmap (a 


borboleta) e imagens vetoriais (Figura 1-1). 
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Figura 1-1 
Janela do 
documento. A tela 
de pintura do 


Fireworks pode ter 


até 6000 pixels de 
largura por 6000 
pixels de altura. 
Você pode mover e 
redimensionar os 
painéis, a caixa de 
ferramentas e as 
barras de 
ferramentas para 
personalizar seu 
ambiente. 
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4. Selecione a ferramenta Pointer na caixa de ferramentas 
do Fireworks (Figure 1-2). 


Figura 1-2 
5. Clique uma vez na parte da imagem com a borboleta para A ferramenta 
selecioná-la. Pointer (canto 


. . . superior esquerdo) 
6. Selecione a ferramenta Magnify e clique e arraste um e a ferramenta 


retängulo ao redor de uma parte pequena da imagem de Subselection 
bitmap da borboleta (Figura 1-3). (canto superior 
direito) 


7. Selecione 100% a partir do menu pop-up Document 
magnification localizado na barra de ferramentas View 
Control no canto inferior esquerdo da tela. 


Figura 1-3 Figura 1-4 

Os pixels, elementos básicos de gráficos bitmap, são pequenos quadrados combinados 
como os ladrilhos de um mosaico para a criação de imagens. Uma imagem bitmap fica 
com mais granulacáo a medida que a ampliacáo mostra os pixels individualmente. 


8. Selecione a ferramenta Subselection e clique uma vez no caminho mais externo da imagem vetorial. 
Quando o caminho estiver selecionado com a ferramenta Subselection, os pontos ficaráo visiveis 
(Figure 1-5). 


9. Selecione a ferramenta Magnify e utilize-a para clicar e arrastar um retángulo ao redor de uma 
pequena parte do caminho selecionado. Selecione 100% a partir do menu pop-up Document 
magnification localizado no canto inferior esquerdo da barra de ferramentas View Control. Utilizando 
a ferramenta Subselection, clique em uma das algas de ponto e gire-a levemente. 


O caminho e a sombra assumem um novo formato. Criando caminhos editáveis com atributos de 
bitmap, o Fireworks garante que seu trabalho poderá ser completamente editado por todas as 
etapas do processo de design. 


Figura 1-5 


Figura 1-6 z 


A ampliacáo de qualquer objeto do Fireworks mostra 
os pixels. Mas os pixels dos objetos säo redesenhados 
como resultado da edigáo vetorial. Mesmo os efeitos 
sáo redesenhados depois da edigáo de um objeto. 


O Fireworks ameniza a diferenga entre imagens vetoriais e de bitmap. O caminho de um objeto do 
Fireworks tem um caminho vetorial editável. Mas ele pode ter uma pincelada larga, texturizada, um 
preenchimento de imagem e um efeito como uma sombra, fissura ou brilho. 
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Figura 1-7 

Barra de Ferramentas Expandida. A caixa de ferramentas no lado esquerdo da janela de documento contem 32 ferramentas, 
algumas das quais estäo contidas em grupos de ferramentas ampliados nesta figura. Para exibir um grupo de ferramentas, 
pressione e segure qualquer ferramenta com triängulo no canto inferior direito. Para uma explicagäo sobre o uso de cada 
ferramenta, consulte a página seguinte. 
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Use esta 
ferramenta 


Pointer 
Select Behind 
Crop 
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Para 


Seleciona e arrasta os objetos 

Seleciona os objetos que estäo atras de outros objetos 

Descarta partes de uma imagem 

Exporta uma parte do documento 

Seleciona um objeto dentro de um grupo ou pontos em um caminho 
Seleciona uma area de pixels retangular no modo Image Edit 
Seleciona uma area de pixels eliptica no modo Image Edit 

Seleciona uma area de pixels a mäo livre no modo Image Edit 
Seleciona uma area de pixels poligonal no modo Image Edit 
Seleciona areas de pixels de cores semelhantes no modo Image Edit 
Movimenta o documento 

Altera a ampliação da visualização 

Desenha linhas retas 

Desenha caminhos por meio de pontos de ancoragem 

Desenha retângulos, retângulos arredondados e quadrados 
Desenha elipses e círculos 

Desenha polígonos e estrelas 

Cria blocos de texto 

Desenha traçados de lápis de um pixel 

Desenha traçados de pincel usando as configurações do painel Brush 


Redesenha partes de um caminho selecionado usando as configurações do 
painel Brush 


Redimensiona e rotaciona objetos 
Inclina e rotaciona objetos e altera a perspectiva 
Distorce e rotaciona objetos 


Estende ou reduz o segmento de um caminho usando um cursor 
redimensionável 


Faz a reformatação de um caminho selecionado dentro da área do cursor 
redimensionável 


Aumenta as características do traçado controlado pela pressão ou velocidade 
Diminui as características do traçado controlado pela pressão ou velocidade 
Faz a amostragem de uma cor, aplicando-a ao tinteiro de cor ativo 


Preenche objetos com cores, degradês ou padrões e ajusta preenchimentos 
com as alças da ferramenta Paint Bucket 


Remove ou substitui partes dos objetos da imagem e recorta caminhos 


Copia partes do objeto de uma imagem 
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DOIS CONJUNTOS DE FERRAMENTAS EM UM 


O Fireworks tem dois modos básicos — modo Object e modo Edicäo de Imagem: 
O modo Object é onde ocorrem a criagäo de imagens vetoriais e algumas manipulagöes de imagem e o 
modo Edição de Imagem é onde ocorre a edição de pixels dentro de uma imagem ou plano de fundo. Eles 


usam a mesma caixa de ferramentas e algumas ferramentas, mas não todas. As ferramentas que não 


estão disponíveis em um modo específico ficam desativadas quando você está trabalhando naquele modo. 


Modo Edição de Imagem 


1. Entre no modo Edição de Imagem clicando duas vezes na imagem de bitmap da borboleta. 


2. Observe a borda listrada que indica que o Fireworks está no modo Edição de Imagem. As 
ferramentas de edição de imagem como as ferramentas Marquee, Lasso, Eraser e Rubber Stamp 
estão agora ativas e disponíveis para utilização. 


3. Clique fora da imagem ou no botão Stop, localizado na parte inferior na barra de status (PC), ou na 
barra de ferramentas de opacidade (Mac), para sair do modo de edição de imagem (Figura 1-8). 


Atividades no modo Edição de Imagem incluem: 


— criar e editar imagens para a Web 

— editar imagens importadas da Web 

— editar pixels com a ferramenta Pencil 

- reaplicar elementos de imagem com a ferramenta Rubber Stamp 
— pintar em cores com a ferramenta Brush 

— apagar para transparência ou outra cor 

- aplicar filtros Xtra a seleções de pixels 

— editar GlFs, JPEGs, e PNGs importados 

— criar imagens compostas 


[100% y] Full Displ pe EE O aa ds 
ull Display Clique fora da imagem ou 
Press Stop lo el Edit mode. no botäo Stop localizado na 


barra de status para sair do 


Astan| Ez Fireworks - 2type = modo Image Edit. 


Modo Objeto 
O modo Objeto é o modo padrão. Algumas ferramentas como as ferramentas Pen e Text só ficam ativas 
no modo Objeto. 


Atividades no modo Objeto incluem: 


— desenhar caminhos arrastando uma ferramenta de forma básica ou a ferramenta Line, 
colocando pontos com a ferramenta Pen ou desenhando um caminho com uma pincelada de 
pixel largo com a ferramenta Pencil 


— desenhar caminhos com uma grande variedade de pinceladas, incluindo texturas e padrões 
com a ferramenta Brush 


— editar caminhos com as ferramentas Freeform, Reshape Area, Redraw Path, Eraser, e Path 
Scrubber, entre outras 


— editar caminhos movendo pontos e ajustando alças Bezier 

— digitar e editar texto 

— importar, posicionar e aplicar efeitos a imagens de bitmap 

— importar e editar documentos com imagens vetoriais criadas em aplicativos como o FreeHand 
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PAINEIS FLUTUANTES 


Os paineis do Fireworks flutuam sobre o documento. Coloque-os em qualquer lugar da tela. Os painéis 


Layers and Frames e Brushes and Fills tém guias. Os outros dois painéis sáo os painéis Tool Options 


e Color Mixer. Feche qualquer um destes painéis utilizando a caixa de fechamento padráo. Abra ou 


feche os painéis escolhendo o comando apropriado no menu Window. 


O PAINEL LAYERS AND FRAMES 


Os controles Layers and Frames estáo localizados em um painel com guias diferentes. 


Camadas 
1. Escolha Window > Layers para abrir o Figura 1-9 
painel Layers and Frames (Figura 1-9). Camadas dividem 
le ig : li : um documento do 
2. Se ele ja estiver aberto, clique na guia Firewòrks.em planos 
Layers para trazê-lo para a frente. discretos, como se Os 
3. Clique no nome da camada de plano de un 
fundo para selecionä-la. desenhados em päginas 
A camada ativa fica realgada. A camada separadas sobrepostas. 
de plano de fundo está sempre na parte Cada objeto do gráfico 


está localizado em uma 


inferior da ordem de empilhamento. camada. Você pode 


4. Clique no nome da camada Text para criar todas as camadas 
ativá-la. antes de desenhá-las ou 

a E . adicioná-las conforme 

5. Utilizando a ferramenta Pointer, clique na o desejado. 


linha de texto na imagem. 


O quadrado azul indica em que camada o objeto 
selecionado reside. A imagem da borboleta e as imagens 
vetoriais estão na camada de primeiro plano. Para mover 
um objeto selecionado para uma camada diferente, arraste 
o ícone do quadrado azul para cima ou para baixo na lista. 


6. Clique na área na segunda coluna à esquerda de um nome 
de camada para bloquear aquela camada. 


Um cadeado indica que a camada está trancada (Figura 1-10). 
Objetos em uma camada trancada não podem ser editados até 
que a camada seja destrancada. 


7. Clique na área da primeira coluna à esquerda de um nome 
de uma camada de texto para ocultar aquela camada 
(Figura 1-11). 


O ícone exibir/ocultar desaparece com o texto dentro do docu- 
mento. Ocultar uma camada oculta todos os objetos daquela 
camada, mas não os remove do documento. Exibir uma camada 
significa exibir todos os objetos daquela camada. Uma camada 
oculta não pode ser uma camada ativa. 


8. Clique no quadrado da primeira coluna à esquerda do nome da 
camada para exibir aquela camada. 


Somente objetos em camadas visíveis e desbloqueadas são 
editáveis. 


Muitas das ações associadas a camadas — adicionar, duplicar, 
renomear, remover, ocultar ou exibir, e trancar ou destrancar 
camadas — estão localizadas no menu pop-up Options. 
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Layers and Frames 


Layers | Frames | 
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Figura 1-10 


Layers and Frames 


Layers | Frames | 


DRE 


Figura 1-11 
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Quadros 


1. Seo painel Layers and Frames náo estiver 
aberto, escolha Window > Frames para 
abri-lo com a guia Frames à frente (Figura 
1-12). 


2. Seo painel já estiver aberto, clique na guia 
Frames para mové-la para a frente. 


BRUSHES AND FILLS 


z| Figura 1-13 


Brushes and Fills 
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<— de efeito 
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Figura 1-15 


O painel Effect controla os atributos de um efeito aplicado, ou que será aplicado, a um objeto. 
O painel Effect tem três seções, que podem variar de acordo com o efeito escolhido. 
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documento contém apenas um 
quadro. Os quadros contêm a 


animado do Fireworks. Cada 
quadro de um documento tem 


O painel Brush tem quatro seções. 


Figura 1-12 
Paleta do Frames. Este 


Layers and Frames 


estrutura de um documento 


o mesmo tamanho e as 
mesmas camadas na mesma 
ordem dos outros quadros. 
Todos os quadros 
compartilham a camada de 
plano de fundo. 


O Painel Brush controla os atributos de 
pinceladas desenhadas ou pintadas. Defina a 
pincelada das ferramentas Brush, Pen, Line, 
e de ferramentas de formas básicas, e edite 
as pinceladas de objetos selecionados. 


~t— Categoria e tipo de pincel 


O Painel Fill controla os atributos da 
área interior de um objeto. Vocé pode 
definir o preenchimento de um caminho 
aberto ou fechado. 


Brushes and Fills 


Brush Fil — | Effect | 


+] 


Categoria e nome 
do preenchimento 


Tipo de borda — 


Textura e Tenure: 
u [Gra I 
transparéncia = = F 
la Transparent 


Amostra do 
preenchimento e —> 
tinteiro de cores 


Ve Apply | 


Figura 1-14 
O painel Fill tem quatro seções. 
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COLOR MIXER 


Figura 1-16 

O Color Mixer é usado para criar uma cor que possa ser inserida 
no tinteiro de cor ativo. Insira valores de Red (R), Green (G) e 
Blue (B) ou use os controles deslizantes pop-up para misturar uma 
cor ou a barra de cores na parte inferior para selecionar uma cor 
usando a ferramenta Eyedropper. Além disso, o Color Mixer 
podem ser usado em Hexadecimal, CMY, HSB ou Grayscale. 
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TOOL OPTIONS Tool Options 
Pencil 


Se o painel Tool Options não estiver aberto, você poderá 
abri-lo clicando duas vezes em uma ferramenta. I Anti-Aliased 


. ; E v Auto Erase 
Com o painel aberto, clique em varias ferramentas da a 


Toolbox para investigar as várias opções de ferramentas. 


Figura 1-17 

O painel Tool Options contem 

PROPRIEDADES DO DOCUMENTO opgöes especificas de ferramentas 
para a ferramenta atual. As 

Ao iniciar a criação de um novo documento, verifique todas opcóes específicas mudam de 
as Propriedades do Documento (Figura 1-18). Planejando acordo com a seleção de uma 
com cuidado o design de seu documento e requerimentos outra ferramenta, 


finais de saída, você pode decidir com antecedência que 
configurações são melhores. Apesar de muitas propriedades 
do documento poderem ser alteradas conforme o 
necessário, às vezes estas alterações podem ter resultados 
inesperados. Pensar e planejar com base no futuro é a 
melhor estratégia. 


1. Feche 2type.png escolhendo File > Close. (Não salve as alterações.) 
2. Crie um novo arquivo escolhendo File > New ou clicando no botão New na barra de ferramentas Main. 


Tamanho da Tela de Pintura 


Defina o Canvas size na caixa de diálogo New Document para definir o tamanho de seu documento. 
Digite 600 no campo Width e 400 no campo Height. 


As dimensões da tela de pintura podem ser definidas utilizando pixels, polegadas ou centímetros. Se 
você desejar alterar o tamanho da tela de pintura mais tarde, selecione Modify > Document > Canvas 
Size ou utilize a ferramenta Crop para cortar a imagem de plano de fundo. 


Resolução 


A resolução é definida na caixa de diálogo New Document como pixels por polegada ou pixels por 
centímetro. Considere a média de entrega pretendida ao atribuir a resolução. Por exemplo, imagens da 
Web são salvas normalmente em 72 pixels por polegada devido à resolução padrão de exibição do 
monitor do computador. 


Para a Web, a melhor resolução é 72 pixels por polegada (per inch). 
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Cor da Tela de Pintura 


A tela de pintura é a camada da parte inferior do documento, abaixo da camada de Background. Áreas 
transparentes da camada de plano de fundo aparecem com a cor da tela de pintura. Vocé pode escolher 
uma tela de pintura branca, transparente ou colorida na caixa de diálogo New Document (Figura 1-18). 


O Fireworks irá suavizar o serrilhado da cor de sua tela de pintura. Assim, para obter melhores 
resultados, defina a cor da tela de pintura para a cor de plano de fundo de sua página da Web. 


New Document 


Figura 1-18 
Configure a resolugäo de maneira apropriada na caixa de diálogo New Document. 
Quando a resolucáo do documento estiver definida, ela náo poderá ser alterada. 


Geralmente, ao se trabalhar com cores de páginas personalizadas e formato de 
arquivo que suporta transparência (como o GIF), é aconselhável a criação de 
gráficos na Web com uma tela de pintura com transparência. Entretanto, pode 
ser visualmente difícil de criar gráficos com o padrão que indica transparência. 
Em vez disso, tente criar os seus gráficos com uma tela de piintura branca e 
alterá-la depois escolhendo Modify > Document > Canvas Color. 


Número de etapas a desfazer 


Escolha Edit > Undo para reverter uma ação. Digite um valor até 100 no campo File > Preferences > 
General > “Undo Steps”. 


Observe que a necessidade de RAM aumenta com o número de etapas a desfazer. A configuração 
padrão para as preferências Undo é 8. 


Alterações às preferências Undo não têm efeito até que o Fireworks seja reiniciado. 
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Réguas 


Para exibir ou ocultar réguas, selecione View > Rulers. Observe que, independentemente da unidade de 
medida do documento, as réguas sempre exibem pixels. 


Grade 


A grade é um plano de fundo de linhas horizontais e verticais que vocé pode utilizar para posicionar seu 
trabalho. 

1. Escolha View > Grid para exibir a grade. 

2. Escolha View > Grid para desativar a grade. 


3. Com View > Snap to Grid selecionada, arrastar um objeto para perto de uma linha de grade faz com 
que o objeto seja atraído para a grade. 


Guias 

Utilize guias que, como a grade, sáo linhas-guia náo exportáveis, para alinhar e posicionar objetos com 
precisáo. 

1. Escolha View > Guides para exibir ou ocultar as guias. 


2. Para adicionar uma guia, as réguas devem estar visiveis. Arraste as guias a partir da régua vertical 
ou horizontal. 


3. Com View > Snap to Guides selecionada, objetos sáo atraídos para a guia. 


MAIS EXERCÍCIOS PARA APRIMORAR SUAS HABILIDADES 


e Observe os modos diferentes em que as imagens são utilizadas na Web hoje em dia. 


e Visite cinco sites da Web que utilizem imagens como uma etapa importante da “mensagem” a 
passar e analise a fungáo das imagens. Elas contam a história? Elas ajudam a ilustrar o ponto 
de vista? Elas vendem o produto? Elas sáo parte da mensagem corporativa? Elas sáo 
divertidas? Tente encontrar cinco sites muito diferentes. 

e Finalmente, tente analisar que tipo de imagem vocé está vendo, vetoriais ou de bitmap? O tipo 
de arquivo indica o tipo de imagem e examinar o código-fonte em HTML de uma página pode 
ser útil. Para visualizar o código-fonte no Navigator, escolha View > Page Source e para 
visualizar o código-fonte no Internet Explorer escolha Exibir > Código-Fonte. 
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